<template>
    <div class="useregister-root">
      <el-row>
        <el-col :span="6">
          <el-input placeholder="搜索用户或手机号" v-model="searchThis" @change="search"></el-input>
        </el-col>
      </el-row>
      <el-table
          :data="tableData"
          :height="currentHeight"
          v-loading.body="loading"
          element-loading-text="新联为您加载数据中"
          border>
          <el-table-column
              prop="index"
              label="序号"
              width="90"
              sortable
              fixed="left"
              >
          </el-table-column>
          <el-table-column
              prop="name"
              label="用户"
              fixed="left"
              sortable
              width="90">
          </el-table-column>
          <el-table-column
              prop="account"
              label="账号"
              fixed="left"
              sortable
              width="150">
          </el-table-column>
          <el-table-column
            label="手机归属地"
            width="200"
          >
          </el-table-column>
          <el-table-column
              prop="sex"
              label="性别"
              width="70"
          >
          </el-table-column>
          <el-table-column
              prop="address"
              label="地址"
              width='260'
          >
          </el-table-column>
          <el-table-column
              label="注册时间"
              width="200"
          >
          <template scope="scope">
              <p>
                {{scope.row.regtime}}
              </p>
              <p>开通档案{{scope.row.filereg}}天</p>
              <p>{{scope.row.lastlogin}}天前登陆</p>
          </template>
          </el-table-column>
          <el-table-column
              prop="regfrom"
              label="注册来源"
              width='260'
          >
          </el-table-column>
          <el-table-column
              prop="attention"
              label="我的关注"
              width='200'
          >
          </el-table-column>
          <el-table-column
              prop="attention"
              label="关注我的"
              width='200'
          >
          </el-table-column>

          <el-table-column
              label="详情"
              width="75"
              prop="uid"
              fixed="right"
              >
              <template scope="scope">
              <router-link :to="{name:'user-detail',query:{uid:scope.row.uid}}">查看</router-link>
              </template>
          </el-table-column>

          <el-table-column
            label="操作"
            width="120"
            fixed="right"
          >
            <template scope="scope">
              <el-button size='mini'>在线帮助</el-button>
              <el-button 
                size='mini' 
              >
                更新资料
              </el-button>
              <el-button size='mini'>添加亲友</el-button>
              <el-button size='mini'>修改服务医生</el-button>
            </template>
          </el-table-column>

      </el-table>
      <footer>
        <el-pagination
          layout="total,prev,pager,next,jumper"
          :total="pagination.total"
          :page-size="pagination.pageSize"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </footer>
    </div>
</template>

<script>
export default{
  name: 'useregister',
  data () {
    return {
      uid: 1,
      searchThis: '',
      tableData: [],
      loading: true,
      currentHeight: 550,
      pagination: {}
    }
  },
  components: {
  },
  methods: {
    fetchData () {
      this.$http({
        method: 'POST',
        url: 'http://api.xltest.cn/sryk/useregister',
        data: {
          'uid': this.uid
        }
      }).then(data => {
        // var res = JSON.parse(data.body)
        var res = data.body
        this.tableData = res.vipUserList
        this.pagination = res.pagination
        // bus.$emit('userRegister-GetstatisticsData', res.statisData)
        // this.$store.dispatch('setStatisData', res.statisData)
        this.loading = false
      })
    },
    handleCurrentChange (val) {
      // this.page = val
      // console.log(val)
      this.loading = true
      this.fetchData(val)
    },
    search (searchThis) {
      // console.log(searchThis, that.uid)
    }
  },
  created () {
    //  TODO：
    // console.log(this.uid)
    this.fetchData()
  },
  mounted () {
    // console.log(this.uid)
  },
  beforeRouteEnter: (to, from, next) => {
    // console.log('hi', to.query.uid)
    next(vm => {
      // console.log(vm.uid, to.query.uid)
    })
  }
}

</script>

<style lang="scss" scoped>
@import "../../scss/mixin.scss";
.useregister-root{
  margin-top:25px;
  table{
    width:100%;
  }
  .el-input{
    margin-bottom:25px;
  }
}
.el-popover>p{
  text-align:center;
  font-size:14px;
  line-height:1.5;
}
.el-button+.el-button{
  margin-left:0;
}
</style>